<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录与注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100 min-h-screen flex flex-col justify-center items-center">
    <!-- 切换按钮 -->
    <div class="flex space-x-4 mb-4">
        <button id="loginBtn" class="bg-blue-500 text-black px-4 py-2 rounded-md" onclick="showLogin()">登录</button>
        <button id="registerBtn" class="bg-green-500 text-black px-4 py-2 rounded-md" onclick="showRegister()">注册</button>
    </div>
    <!-- 登录表单 -->
    <form id="loginForm" class="bg-white p-8 rounded-md shadow-md w-full max-w-md">
        <h2 class="text-2xl font-bold mb-4">登录</h2>
        <div class="mb-4">
            <label for="loginUsername" class="block text-gray-700 font-bold mb-2">用户名</label>
            <input type="text" id="loginUsername" class="border border-gray-400 p-2 w-full rounded-md" required>
        </div>
        <div class="mb-4">
            <label for="loginPassword" class="block text-gray-700 font-bold mb-2">密码</label>
            <input type="password" id="loginPassword" class="border border-gray-400 p-2 w-full rounded-md" required>
        </div>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md w-full">登录</button>
    </form>
    <!-- 注册表单 -->
    <form id="registerForm" class="bg-white p-8 rounded-md shadow-md w-full max-w-md hidden">
        <h2 class="text-2xl font-bold mb-4">注册</h2>
        <div class="mb-4">
            <label for="registerUsername" class="block text-gray-700 font-bold mb-2">用户名</label>
            <input type="text" id="registerUsername" class="border border-gray-400 p-2 w-full rounded-md" required>
        </div>
        <div class="mb-4">
            <label for="registerPassword" class="block text-gray-700 font-bold mb-2">密码</label>
            <input type="password" id="registerPassword" class="border border-gray-400 p-2 w-full rounded-md" required>
        </div>
        <div class="mb-4">
            <label for="confirmPassword" class="block text-gray-700 font-bold mb-2">确认密码</label>
            <input type="password" id="confirmPassword" class="border border-gray-400 p-2 w-full rounded-md" required>
        </div>
        <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded-md w-full">注册</button>
    </form>

    <script>
        function showLogin() {
            document.getElementById('loginForm').classList.remove('hidden');
            document.getElementById('registerForm').classList.add('hidden');
            document.getElementById('loginBtn').classList.add('bg-blue-500');
            document.getElementById('registerBtn').classList.remove('bg-green-500');
        }

        function showRegister() {
            document.getElementById('registerForm').classList.remove('hidden');
            document.getElementById('loginForm').classList.add('hidden');
            document.getElementById('registerBtn').classList.add('bg-green-500');
            document.getElementById('loginBtn').classList.remove('bg-blue-500');
        }

        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault();
            // 这里可以添加登录逻辑，例如发送请求到后端验证
            alert('登录成功');
        });

        document.getElementById('registerForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const password = document.getElementById('registerPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            if (password !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }
            // 这里可以添加注册逻辑，例如发送请求到后端保存用户信息
            alert('注册成功');
        });
    </script>
</body>

</html>
    